<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Goods Manager</title>
    <link rel="stylesheet" href="../../layui-v2.9.10/layui/css/layui.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }
        .layui-header {
            background-color: #303030;
            color: #fff;
            padding: 0 15px;
        }
        .layui-side, .layui-layout-admin .layui-body, .layui-footer {
            background-color: #f5f5f5;
            color: #333;
        }
        .layui-card-header {
            background-color: #303030;
            color: #fff;
        }
        .layui-card-body {
            background-color: #fff;
            color: #333;
        }
        .layui-layout-admin .layui-body {
            padding: 15px;
        }
        .layui-table-cell {
            height: auto;
            white-space: normal;
        }
        .layui-table-cell img {
            max-width: 100px;
            max-height: 100px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 头部导航 -->
    <div class="layui-header">
        <jsp:include page="header.jsp" />
    </div>

    <!-- 侧边栏 -->
    <div class="layui-side">
        <jsp:include page="side.jsp" />
    </div>

    <!-- 主体内容区 -->
    <div class="layui-body" style="padding: 20px;">
        <!-- Main Content Area -->
        <div>
            <form class="layui-form layui-row layui-col-space16" method="post" action="../../GoodsSearchServlet.do">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="goods_id" value="" placeholder="goods_id" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <input type="text" name="goods_category" placeholder="goods_category" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="date" readonly placeholder="Date" class="layui-input demo-table-search-date">
                    </div>
                </div>
                <div class="layui-btn-container layui-col-xs12">
                    <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                </div>
            </form>

            <h1 style="margin-bottom: 20px;">查询结果</h1>
            <div class="layui-card">
                <div class="layui-card-body">
                    <table id="searchResultsTable" class="layui-hide" lay-filter="searchResultsTable"></table>

                </div>
                <!-- 验证 JSTL 输出 -->

            </div>
        </div>
    </div>
    <h1 style="margin-bottom: 20px;">商品查询</h1>
</div>


<!-- layui 引入 -->
<script src="../../layui-v2.9.10/layui/layui.js"></script>

<script>
    layui.use(['table'], function(){
        var table = layui.table;

        // Fetching data from JSTL and creating a JavaScript array
        var searchResults1 = [
            <c:forEach var="goods" items="${searchResults1}" varStatus="status">
            {

                goods_id: '${goods.goods_id}',

                <%--goods_image: '${user.goods_image}',--%>

                goods_info: '${goods.goods_info}',
                goods_category: '${goods.goods_category}',
                goods_price: '${goods.goods_price}',

                created_at: '${goods.created_at}',
            }<c:if test="${!status.last}">,</c:if>
            </c:forEach>
        ];

        // Render Table
        table.render({
            elem: '#searchResultsTable',
            cols: [[

                {field: 'goods_id', title: 'Goods ID', width: 80, sort: true, fixed: 'left'},
                // {
                //     field: 'goods_image',
                //     title: 'Goods Image',
                //     width: 200,
                //     sort: true, fixed: 'left'
                // },

                {field: 'goods_info', title: 'Goods Info', width: 150},

                {field: 'goods_category', title: 'Goods Category', width: 150},
                {field: 'goods_price', title: 'Goods Price', width: 150},
                {field: 'created_at', title: 'Created At', width: 150},
                {fixed: 'right', title: 'Action', toolbar: '#actionButtons', width: 180}
            ]],
            data: searchResults1,
            page: true,
            skin: 'line',
            even: true
        });



        table.on('tool(searchResultsTable)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === 'view'){
                viewUser(data.user_id);
            } else if(layEvent === 'edit'){
                modifyUser(data.goods_id);
            } else if(layEvent === 'disable'){
                disable(data.goods_id);
            }
        });
    });

    // Function to view user
    function viewUser(userId) {
        window.location.href = '<%= request.getContextPath() %>/SearchServletLook.do?id=' + userId;
    }

    // Function to modify user
    function modifyUser(userId) {
        window.location.href = '<%= request.getContextPath() %>/EditGoodsServletUser.do?id=' + userId;
    }

    // Function to delete user
    function disable(userId) {
        if (confirm("确定下架该商品?")) {
            window.location.href = '<%= request.getContextPath() %>/DisableGoodsServletUser.do?id=' + userId;
        }
    }


</script>



<script type="text/html" id="actionButtons">
    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="disable">下架</a>
</script>





</body>
</html>
